<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>我的订单</title>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/css/all.min.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="/img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css">
		<link rel="stylesheet" type="text/css" href="/css/media.css">
		<link rel="stylesheet" type="text/css" href="/css/responsive.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
		<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css">
		<link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="/css/public.css" media="all">
		<link rel="stylesheet" type="text/css" href="/css/personal.css"/>
		<link rel="stylesheet" type="text/css" href="/css/myBill.css" />
		<style>
			.personalImg{
				text-align: center;
				height: auto;
				width: auto;
				white-space: normal;
				max-height: 80px;
				max-width: 90px;
				border-radius:50%;
				border: 1px solid salmon;
			}
		</style>
	</head>
	<body>
	<th:block th:include="header"/>

		<!------------------------------Bott------------------------------>
		<div class="Bott">
			<div class="wrapper clearfix">
				<th: block th:include="personalHeader"/>
				<div class="you fl">
					<div class="my clearfix">
						<h2 class="fl">我的订单</h2>
					</div>
					<div class="dlist clearfix">
						<ul class="fl clearfix" id="wa">
							<li  class="AllBill"><a href="#2" >全部有效订单</a></li>
							<input type="hidden" value="待支付">
							<li><a class="payStatus">待支付</a></li>
							<input type="hidden" value="已支付">
							<li><a class="payStatus">待收货</a></li>
							<input type="hidden" value="已收货">
							<li><a class="payStatus">待评价</a></li>
						</ul>
					</div>


					<div id="models">


					</div>

				</div>
			</div>
		</div>

	<th:block th:include="end"/>
		<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/user.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/jquery-3.4.1.min.js"></script>
	<script src="/js/owl.carousel.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/jquery.magnific-popup.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/all.min.js"></script>
	<script src="/js/index.js"></script>
	<script src="/js/wow.min.js"></script>


	<script type="text/html" id="billInfoTemplate">
		{{#  layui.each(d,function(i, billInfo){ }}
		<div class="dkuang clearfix deng">
			<p class="one fl" >{{billInfo.status}}</p>
			<div  class="clearfix">
				<div class="fl vewwl">
					{{#  if(billInfo.status=='待支付'){ }}
					<p class="one fl" id="statusTime"></p><p class="one fl" >秒后订单自动取消...</p>
					{{#  } }}
				</div>
			</div>
			<div class="word clearfix">
				<ul class="fl clearfix">
					<li >订单号:</li>
					<li>{{billInfo.code}}</li>
				</ul>
				<p class="fr">订单金额：<span>{{billInfo.price}}</span>元</p>
			</div>
			<div class="shohou clearfix">
				<a href="#" class="fl"><img src="/img/LT-MALL.png"/></a>
				<p class="fl"><a href="#">{{billInfo.createTime}}</a><a style="width: auto">详细信息请点击右侧订单详情按钮查看</a></p>
				<p class="fr">
					<input type="hidden" value="{{billInfo.id}}">
					<a class="delBill" >取消订单</a>
					<a href="/billDetail/billDetailPage?billId={{billInfo.id}}">订单详情</a>
				</p>
			</div>
		</div>
		{{#  }); }}
	</script>

	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>

		layui.use([ 'form', 'table', 'layer','laytpl'], function() {
			var $ = layui.jquery, form = layui.form, table = layui.table;
			layer = layui.layer;
			var laytpl = layui.laytpl;

			var myBillLoad=function() {
				//查询当前用户所有订单信息
				$.post("/myBill/billInfo",function (billInfo){
					laytpl($("#billInfoTemplate").html()).render(billInfo,function (ht){
						$("#models").html(ht);
					});
				});
			};
			myBillLoad();

			//给取消按钮绑定事件
			$("body").on("click",".delBill",function (){
				$.post("/bill/deleteBill?billId="+$(this).prev().val(),function (){
					myBillLoad();
					layer.msg("订单已取消!");
				});
			});

			var countdown = 60; // 倒计时初始时间为60秒
			function setTimeRun() {
				if (countdown == 0) {
					layer.msg("订单已超时取消!");
				} else {
					$("#statusTime").html(countdown);
					countdown--;
					setTimeout(setTimeRun, 1000);
				}
			}
			setTimeRun();


			//支付状态栏绑定事件

			$(".AllBill").on("click",function (){
				myBillLoad();
			});

			$(".payStatus").on("click",function (){
				$.post("/myBill/selectByStatus?status="+$(this).parent().prev().val(),function(billInfo) {
					laytpl($("#billInfoTemplate").html()).render(billInfo,function (ht){
						$("#models").html(ht);
					});
				});
			});
		});
	</script>
	</body>
</html>
